<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <p>组件</p>
    <p>{{msg}}</p>
    <!-- 2. 使用组件，当做标签使用 -->
    <p>注意事项1：在组件中使用data需要改成有返回值的函数</p>
    <p>注意事项2：在组件中有且只有一个根元素</p>
    <p>注意事项3：组件名不要和html已有的标签重复;组件名是多个单词时，在js中使用驼峰，在html中使用中划线</p>
    <p>注意事项4:外层是父组件，内层是子组件，可以多级嵌套</p>
    <my-component></my-component>
    <my-side />
    <!-- <my-content></my-content> -->
  </div>
  <script src="../vue.js"></script>
  <script>
    // 全局注册
    Vue.component('myContent', {
      template: '<div>{{msg}},我是通过全局注册生成的组件</div>',
      data() {
        return {
          msg: 'hello'
        }
      },
    })
    let vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello',
        num: 1
      },
      components: {
        // 1. 注册组件（局部注册）
        // Do not use built-in or reserved HTML elements as component
        // Unknown custom element: <mycomponent> - did you register the component correctly?
        myComponent: {
          // Component template should contain exactly one root element.
          template: `
            <div class="my-component">
             <button @click="num ++">+1</button><span>{{num}}</span>
            </div>
          `,
          // The "data" option should be a function that returns a per-instance value in component definitions.
          data() {
            return {
              msg1: 'hi~',
              num: 1
            }
          }
        },
        mySide: {
          template: `
            <div class="my-side">
              <ul>
                <li v-for="num in arr1">{{num}}</li>
              </ul>
              <my-content></my-content>
            </div>
          `,
          data() {
            return {
              arr1: [1,2,3,4]
            }
          },
        },
      }
    })
  </script>
</body>

</html>